<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-02-01 18:24:45
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-02-01 21:16:36
 * @FilePath: \shop-list\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-case">
    <ShopTableVue :data="goods">
      <template #head>
        <th>编号</th>
        <th>图片</th>
        <th>名称</th>
        <th width="100px">标签</th>
      </template>
      <template #main="{ item }">
        <td>{{ item.id }}</td>
        <td><img :src="item.picture" /></td>
        <td>{{ item.name }}</td>
        <td>
          <ShopListButtonVue v-model="item.tag"></ShopListButtonVue>
          <!-- 
            1.这里的数据是由App传递给Table组件，再由Table组件通过作用域插槽反传递回来的
            2.并且因为传递过来的是对象，是地址的引用
            3.这里v-model在原则上是不能引用的，因为v-model不能直接引用props传来的值，但是这里的值被 v-for item in data 这个操作进行了提取
            4.所以v-model可以进行引用，并且传递给了Button组件(这里本质上传递的是App里的goods的地址)
            5.button组件通过 $emit进行了修改，修改的是 table传过去的 item.tag
            6.由于item.tag指向了goods的地址，所以item.tag被改变后，goods里的数据也进行了改变
           -->
        </td>
      </template>
    </ShopTableVue>
  </div>
</template>

<script>
import ShopListButtonVue from './components/ShopListButton.vue';
import ShopTableVue from "./components/ShopTable.vue";
export default {
  components: {
    ShopTableVue,
    ShopListButtonVue
  },
  name: "TableCase",
  data() {
    return {
      goods: [
        {
          id: 101,
          picture:
            "https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg",
          name: "梨皮朱泥三绝清代小品壶经典款紫砂壶",
          tag: "茶具",
        },
        {
          id: 102,
          picture:
            "https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg",
          name: "全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌",
          tag: "男鞋",
        },
        {
          id: 103,
          picture:
            "https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png",
          name: "毛茸茸小熊出没，儿童羊羔绒背心73-90cm",
          tag: "儿童服饰",
        },
        {
          id: 104,
          picture:
            "https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg",
          name: "基础百搭，儿童套头针织毛衣1-9岁",
          tag: "儿童服饰",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
</style>